<template>
  <el-form :inline="true" :model="form" :rules="rules" ref="form" size="mini" style="margin-bottom: -18px;">

    <el-form-item label="状态" prop="userStatus">

      <el-select v-model="form.userStatus" placeholder="状态选择" style="width: 100px;">

        <el-option label="全部" value="" />

        <el-option label="正常" value="0" />

        <el-option label="禁用" value="1" />

      </el-select>

    </el-form-item>

    <el-form-item label="关键字" prop="key">

      <el-input v-model="form.key" placeholder="关键字" style="width: 100px;" />

    </el-form-item>

    <el-form-item>

      <el-button type="primary" @click="handleFormSubmit">

        <d2-icon name="search" /> 查询

      </el-button>

    </el-form-item>

    <el-form-item>

      <el-button @click="handleFormReset">

        <d2-icon name="refresh" /> 重置

      </el-button>

    </el-form-item>

    <el-form-item>

      <el-button @click="handleFormAdd">

        新增

      </el-button>

    </el-form-item>

  </el-form>
</template>

<script>
export default {
  data () {
    return {
      form: {
        userStatus: '0',
        key: ''
      },
      rules: {
        type: [{
          required: true,
          message: '请选择一个状态',
          trigger: 'change'
        }],
        user: [{
          required: true,
          message: '请输入用户',
          trigger: 'change'
        }]
      }
    }
  },
  methods: {
    handleFormSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('submit', this.form)
        } else {
          this.$notify.error({
            title: '错误',
            message: '表单校验失败'
          })
          return false
        }
      })
    },
    handleFormReset () {
      this.$refs.form.resetFields()
    },
    handleFormAdd () {
      this.$router.push('/sys/user/add')
    }
  }
}
</script>
